import { useLoad } from '@tarojs/taro'
import CollectItem from '@/components/CollectItem/index'
import Divider from '@/components/Divider/index'
import { getCollectService } from '@/api/collect'
import { useEffect, useState } from 'react'
import { CollectInfo } from '../../components/CollectItem/type'
import collectStyles from './index.module.scss'

export default function Collect() {
  // 获取页面收藏信息
  const [collectList, setCollectList] = useState<CollectInfo[]>([])

  const getCollectList = async () => {
    try {
      const { data } = await getCollectService()
      setCollectList(data)
    } catch (error) {
      console.error('Failed to fetch collect list:', error)
    }
  }

  useLoad(() => {
    console.log('Page loaded.')
    // 加载页面就发起请求
    getCollectList()
  })

  useEffect(() => {
    console.log(collectList)
  }, [collectList])

  return (
    <div className={collectStyles.collect}>
      {collectList && (
        <>
          {collectList.map((item) => (
            <CollectItem
              key={item.id}
              item={item}
              updateCollectList={getCollectList}
            />
          ))}
          <Divider />
        </>
      )}
      {/* {collectList.length && (
        <AtActivityIndicator mode='center'></AtActivityIndicator>
      )} */}
      {!collectList && (
        <>
          <div className={collectStyles.empty}>暂时没有收藏数据哦~</div>
        </>
      )}
    </div>
  )
}
